<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--字体图标-->
		<link href="../../lib/javaex/pc/css/icomoon.css" rel="stylesheet" />
		<!--动画-->
		<link href="../../lib/javaex/pc/css/animate.css" rel="stylesheet" />
		<!--骨架样式-->
		<link href="../../lib/javaex/pc/css/common.css" rel="stylesheet" />
		<!--皮肤-->
		<link href="../../lib/javaex/pc/css/skin/default.css" rel="stylesheet" />
		<!--jquery，不可修改版本-->
		<script src="../../lib/javaex/pc/lib/jquery-1.7.2.min.js"></script>
		<!--核心组件-->
		<script src="../../lib/javaex/pc/js/javaex.min.js"></script>
		<!--表单验证-->
		<script src="../../lib/javaex/pc/js/javaex-formVerify.js"></script>
		<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.body {
				min-width: 1200px;
				background-color: #E7EAED;
				min-height: 800px;
			}

			.container {
				width: 90%;
				background-color: #fff;
				margin: 20px auto 100px auto;
				box-shadow: 0 20px 30px 0 rgb(0 0 0 / 15%);
				min-height: 800px;

			}

			.table {
				padding: 40px 20px 20px 20px;

				min-height: 700px;
			}

			.pager {
				position: initial;
				padding-bottom: 20px;
				padding-right: 30px;
			}

			#table {
				margin-top: 30px;
			}
		</style>
	</head>
	<body class="body">
		<div class="container">
			<div class="table">
				<div class="javaex-block">
					<table id="table" class="javaex-table td-c-1 td-c-2">
						<thead>
							<tr>
								<th>订单编号</th>
								<th>商品名称</th>
								<th>订单时间</th>
								<th>订单金额</th>
								<th>商品数量</th>
								<th>订单状态</th>
								<th width="210px">操作</th>
							</tr>
						</thead>
						<tbody id="tbody">

						</tbody>
					</table>
				</div>
			</div>
			<div class="pager">
				<div class="javaex-page">
					<ul id="page" class="javaex-pagination"></ul>
				</div>
			</div>
		</div>
	</body>
	<script>
		var pageSize = 10;
		var totalPages;
		var totalNum;
		var token;
		window.onload = function() {
			token = localStorage.getItem("token")
			initPage();
		}
		var array;

		function initPage() {
			$.ajax({
				type: "post",
				//后端需要调用的地址
				url: "http://" + getOrdersHost() + "/orders/showForBusiness",
				dataType: "json",
				data: {
					"context": '',
					"currentPage": 0,
					"pageSize": pageSize,
					"sort": 'date',
					"asc": false
				},
				headers: {
					"token": token,
				},
				timeout: 10000,
				async: true,
				success: function(res) {
					if (res.code == 200) {
						array = new Array();
						var goods = JSON.parse(res.goods);
						var orders = JSON.parse(res.orders);
						var users = JSON.parse(res.user);
						var address = JSON.parse(res.address);
						for (var i = 0; i < goods.length; i++) {
							array.push([goods[i], orders[i], users[i], address[i]]);
						}
						console.log(array)
						initTable(array);
						javaex.render();
						totalPages = res.totalPages;
						totalNum = res.totalNum;
						javaex.page({
							id: "page", // jquery选择器，指定到ul节点
							pageNum: 1, // 默认选中第几页
							pageSize: pageSize, // 每页显示多少条
							totalPages: totalPages, // 总页数
							isShowJumpPage: true, // 是否显示跳页\
							position: "right",
							totalNum: totalNum, // 总条数，不填时，不显示
							callback: function(rtn) {
								if (rtn.pageSize != pageSize) {
									pageSize = rtn.pageSize;
									initPage();
								}
								$.ajax({
									type: "post",
									//后端需要调用的地址
									url: "http://" + getOrdersHost() +
										"/orders/showForBusiness",
									dataType: "json",
									data: {
										"context": '',
										"currentPage": rtn.pageNum - 1,
										"pageSize": pageSize,
										"sort": 'date',
										"asc": false
									},
									headers: {
										"token": token,
									},
									timeout: 10000,
									async: true,
									success: function(res) {
										console.log(res);
										if (res.code == 200) {
											totalPages = res.totalPages;
											totalNum = res.totalNum;
											array = new Array();
											var goods = JSON.parse(res.goods);
											var orders = JSON.parse(res.orders);
											var users = JSON.parse(res.user);
											var address = JSON.parse(res.address);
											for (var i = 0; i < goods.length; i++) {
												array.push([goods[i], orders[i], users[i],
													address[i]
												]);
											}
											initTable(array);
											javaex.render();
										}

									}
								});
							}
						});
					}
				}
			});
		}

		function initTable(array) {
			$("#tbody").html('');
			for (var i = 0; i < array.length; i++) {
				var html = '';
				html = html + `
					<tr>
						<td>` + array[i][1].ordersId + `</td>
						<td>` + array[i][0].name.substr(0, 20) + `</td>
						<td>` + array[i][1].date + `</td>
						<td>` + (array[i][1].num * array[i][0].price) + `</td>
						<td>` + array[i][1].num + `</td>
						`
				var type = array[i][1].type;
				// console.log(type)

				if (type == 0) {
					html = html + `<td>未付款</td>
						<td>无需操作</td>
					</tr>
					`;
				} else if (type == 1) {
					html = html + `<td>已付款</td>
						<td><button class="javaex-btn yellow" onclick="go(` + array[i][1].ordersId + `)">发货</button></td>
					</tr>
					`;
				} else if (type == 2) {
					var logitics = JSON.parse(array[i][1].logistics);
					html = html + `<td>已发货</td>
						<td><button class="javaex-btn yellow" onclick="show('` + logitics.no + "','" + logitics.com + `')">查看物流</button></td>
					</tr>`;
				} else {
					html = html + `<td>已收货</td>
						<td>无需操作</td>
					</tr>`;
				}
				$("#tbody").append(html);
			}
		}

		function go(id) {
			var com, no;
			javaex.confirm({
				content: `
				<select id="select" width="200px">
					<option value="" selected>请选择</option>
					<option value="中通快递">中通快递</option>
					<option value="申通快递">申通快递</option>
					<option value="顺丰快递">顺丰快递</option>
					<option value="韵达快递">韵达快递</option>
					<option value="EMS">EMS</option>
				</select>
				<input style="margin-top:10px" type="text" id="text" class="javaex-text" placeholder="请输入快递单号" autocomplete="off" />
				`,
				confirm: function() {
					no = $("#text").val();

					$.ajax({
						url: "http://" + getOrdersHost() + "/orders/addOrdersLogistics",
						data: {
							"ordersId": id,
							"logistics": JSON.stringify({
								"com": com,
								"no": no
							})

						},
						headers: {
							"token": localStorage.getItem("token")
						},
						dataType: "json",
						type: "post",
						async: false,
						cache: false,
						success: function(res) {
							console.log(res)
							if (res.code == "orders_200") {
								javaex.tip({
									content: "操作成功",
									type: "success"
								});
								// 建议延迟加载
								setTimeout(function() {
									window.location.reload();
								}, 1000);

							} else {
								javaex.tip({
									content: "操作失败",
									type: "error"
								});
							}
						}
					});
				}
			});
			javaex.select({
				id: "select",
				isSearch: true,
				minWidth: "200",
				// 回调函数
				callback: function(rtn) {
					com = rtn.val;
				}
			});
		}

		function show(logistics, com) {
			console.log(logistics)
			console.log(com)
			javaex.dialog({
				type: "window",
				id: "test", // 指定id，仅当页面存在多个弹出层，需要关闭指定弹出层时才使用
				url: "https://www.kuaidi100.com/chaxun?com=" + com + "&nu=" + logistics, // 页面地址或网址或请求地址
				width: "1000", // 弹出层宽度
				height: "600", // 弹出层高度
				hasBackground: true,
				close: function() {
					console.log("右上角点击X关闭时的回调");
					// 如果你想阻止弹出层关闭，直接 return false; 即可
					// return false;
				}
			});
		}
	</script>
</html>
